<!--分散式房源推广信息编辑表单-->
<template>
	<a-form ref="form" class="house-form-extra" :model="extras" layout="vertical">
		<a-collapse v-model:active-key="activeKey" destroy-inactive-panel expand-icon-position="right">
			<a-collapse-panel v-if="loading.load" key="loading">
				<template #header>
					<a-skeleton-button block active size="small" />
				</template>
				<a-skeleton active :paragraph="{rows: 20}" />
			</a-collapse-panel>
			<a-collapse-panel v-else v-for="(extra, i) in extras" :key="extra.houseRoomId">
				<template #header>{{ house.doorplate }} - {{ extra.roomName }}</template>
				<a-form-item :name="[i, 'tagList']" :rules="[{type: 'array', max: 10}]">
					<a-typography-text strong>
						<blockquote>特色</blockquote>
					</a-typography-text>
					<a-checkbox-group v-model:value="extra.tagList" style="width: 100%">
						<a-row :gutter="16">
							<a-col v-for="item in tags" :key="item.id" :xs="12" :sm="8" :md="6" :lg="4">
								<a-checkbox :value="item.name" class="dic-edit-checkbox">
									{{ item.name }}
									<a @click.prevent="onClickToEditDic('HOUSE@TAGS', '编辑房源特色', item)">
										<edit-outlined />
									</a>
								</a-checkbox>
							</a-col>
							<a-col :xs="12" :sm="8" :md="6" :lg="4">
								<a @click="onClickToEditDic('HOUSE@TAGS', '添加房源特色')">
									<plus-circle-outlined />
									添加
								</a>
							</a-col>
						</a-row>
					</a-checkbox-group>
				</a-form-item>
				<a-form-item>
					<a-typography-text strong>
						<blockquote>配置</blockquote>
					</a-typography-text>
					<a-checkbox-group v-model:value="extra.roomConfigs" name="configs" style="width: 100%">
						<a-row :gutter="16">
							<a-col v-for="item in configs" :key="item.id" :xs="12" :sm="8" :md="6" :lg="4">
								<a-checkbox :value="item.id" class="dic-edit-checkbox">
									{{ item.name }}
									<a @click.prevent="onClickToEditDic('HOUSE@OUTFIT', '编辑房源配置', item)">
										<edit-outlined />
									</a>
								</a-checkbox>
							</a-col>
							<a-col :xs="12" :sm="8" :md="6" :lg="4">
								<a @click="onClickToEditDic('HOUSE@OUTFIT', '添加房源配置')">
									<plus-circle-outlined />
									添加
								</a>
							</a-col>
						</a-row>
					</a-checkbox-group>
				</a-form-item>

				<a-form-item>
					<a-typography-paragraph strong>
				<blockquote>房源名称</blockquote>
			</a-typography-paragraph>
			<a-textarea v-model:value="extra.title" :maxlength="30" show-count placeholder="请输入房型名称" />
				</a-form-item>
				<a-form-item>
					<a-typography-text strong>
						<blockquote>房源描述</blockquote>
					</a-typography-text>
					<a-textarea v-model:value="extra.promotionDesc" :maxlength="300" show-count placeholder="请输入房源描述" />
				</a-form-item>
				<a-form-item :name="[i, 'vrUrl']" :rules="[{type: 'url', message: '请输入合法的URL地址'}]">
					<a-typography-text strong>
						<blockquote>VR看房地址</blockquote>
					</a-typography-text>
					<a-input v-model:value="extra.vrUrl" type="url" :maxlength="500" show-count allow-clear placeholder="请输入VR看房地址" />
				</a-form-item>
				<a-form-item :name="[i, 'imgList']" :rules="[{required: false, message: '请上传房源图片'}]">
					<a-typography-text strong>
						<blockquote>房源图片</blockquote>
					</a-typography-text>
					<file-upload v-model:files="extra.imgList" :biz-id="extra.houseRoomId" :limit="24" accept=".jpg,.png,.jpeg" sub-type="houseImageTypes" />
				</a-form-item>
			</a-collapse-panel>
		</a-collapse>
		<teleport to=".house-edit-dialog .ant-modal-footer">
			<a-button type="primary" :loading="loading.save" @click="saveHouseExtra">保存</a-button>
		</teleport>
	</a-form>
	<dic-edit-dialog v-model:visible="visibles.dic" :value="dic" @close="getDics" />
</template>

<script lang="ts" setup>
	import {onMounted, reactive, ref} from 'vue'
	import {HouseBase, HouseExtra} from '@/interface/house'
	import houseApi from '@/api/house-api'
	import settingApi from 'yuxin-base/src/api/setting-api'
	import {FormInstance, message} from 'ant-design-vue'
	import {EditOutlined, PlusCircleOutlined} from '@ant-design/icons-vue'
	import {Dic} from 'yuxin-base/src/types'
	import {DIC_PID_MAP} from 'yuxin-base/src/constant'
	import FileUpload from '@/components/common/file-upload.vue'
	import DicEditDialog from '@/components/common/dic-edit-dialog.vue'

	const props = defineProps<{
		value: HouseBase
	}>()

	const loading = reactive({
		save: false,
		load: true,
		dic: false
	})

	const visibles = reactive({
		dic: false
	})

	const activeKey = ref<string[] | string>('loading')
	const house = reactive<HouseBase>(props.value)
	const extras = ref<HouseExtra[]>([])

	if (house.id && house.housePid) {
		loading.load = true
		// 获取扩展信息
		houseApi
			.getHouseExtraInfo(house.housePid)
			.then(({data}) => {
				for (const item of data) {
					// 房源配置回显
					item.roomConfigs = (item.roomCfgList || []).map((c: Dic) => c.id)
				}

				extras.value = data
				activeKey.value = data[0].houseRoomId
			})
			.finally(() => (loading.load = false))
	}

	// 特色类型字典
	const tags = ref<Dic[]>([])
	// 配置类型字典
	const configs = ref<Dic[]>([])

	const getDics = () => {
		settingApi.getDicListByPid(DIC_PID_MAP['HOUSE@TAGS']).then(({data}) => (tags.value = data))
		settingApi.getDicListByPid(DIC_PID_MAP['HOUSE@OUTFIT']).then(({data}) => (configs.value = data))
	}

	onMounted(() => {
		getDics()
	})

	/**
	 * 添加字典
	 */
	const dic = ref<Dic>()
	const onClickToEditDic = (label: string, title: string, item?: any) => {
		visibles.dic = true
		dic.value = {
			label,
			title,
			isUse: 1,
			...item,
			pid: DIC_PID_MAP[label]
		}
	}

	const form = ref<FormInstance>()

	/**
	 * 保存房源推广信息
	 */
	const saveHouseExtra = () => {
		form.value?.validate().then(() => {
			loading.save = true

			for (let extra of extras.value) {
				extra.roomCfgList = configs.value.filter(o => extra.roomConfigs?.includes(o.id as string))
			}

			houseApi
				.updateHouseExtraInfo({
					houseBaseId: house.housePid,
					extendInfoList: extras.value
				})
				.then(res => {
					message.success('保存成功')
				})
				.finally(() => (loading.save = false))
		})
	}
</script>

<style lang="less" scoped>
	.house-form-extra {
		margin: 16px 0;

		.ant-checkbox-group {
			width: 100%;

			.dic-edit-checkbox span + span > a {
				display: none;
			}

			.dic-edit-checkbox:hover span + span > a {
				display: inline;
			}
		}

		.ant-form-item {
			margin-bottom: 0;
		}
	}
</style>
